import { useState } from "react";
import { RuleTree } from "@alipay/techui-rule-tree";
import { Col, Form, Input, Radio, Row, Select, Switch } from "antd";

const LOCALE_RADIO_OPTIONS = [
  {
    label: "中文",
    value: "zh-CN",
  },
  {
    label: "English",
    value: "en-US",
  },
];

export default function App() {
  const [form] = Form.useForm();
  const [value, setValue] = useState({});

  const disabled = Form.useWatch("disabled", form);
  const draggable = Form.useWatch("draggable", form);
  const prefixCls = Form.useWatch("prefixCls", form);
  const lineColor = Form.useWatch("lineColor", form);
  const locale = Form.useWatch("locale", form);
  const gap = Form.useWatch("gap", form);

  return (
    <div>
      <Form
        form={form}
        initialValues={{
          draggable: true,
          lineColor: "#eee",
          rule: {
            relation: "and",
            children: [
              {
                name: "Jack",
              },
            ],
          },
          locale: "zh-CN",
        }}
        onValuesChange={(_, values) => setValue(values)}
      >
        <Row>
          <Col span={8}>
            <Form.Item label="间隙gap" name={"gap"}>
              <Select
                allowClear
                options={[
                  { label: 24, value: 24 },
                  { label: 48, value: 48 },
                  { label: 64, value: 64 },
                ]}
              />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="表单禁用disabled"
              name={"disabled"}
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="是否启用拖拽draggable"
              name={"draggable"}
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="类名前缀prefixCls" name={"prefixCls"}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="连接线颜色lineColor" name={"lineColor"}>
              <input type="color" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="国际化locale" name={"locale"}>
              <Radio.Group options={LOCALE_RADIO_OPTIONS} optionType="button" />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item name={"rule"}>
          <RuleTree
            prefixCls={prefixCls}
            disabled={disabled}
            draggable={draggable}
            lineColor={lineColor}
            locale={locale}
            gap={gap}
          >
            {(field) => {
              return (
                <Form.Item noStyle name={[field.name, "name"]}>
                  <Input />
                </Form.Item>
              );
            }}
          </RuleTree>
        </Form.Item>
      </Form>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}
